/* 页面根类，父组件 class 包裹子类名 */
.page-index {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f7f7f7;

    /* banner 区 */
    &__banner {
        width: 100%;
        height: 400px;
        position: relative;
        overflow: hidden;

        .banner__swiper {
            height: 100%;
        }

        .banner__item {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .banner__image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* 指示器，长条形块 */
        .banner__indicator {
            position: absolute;
            bottom: 20px; /* 调整指示器底部位置以适配更高的 banner */
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            padding: 6px 10px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 24px;
        }

        .indicator__block {
            width: 34px;
            /* 放大指示块 */
            height: 8px;
            border-radius: 4px;
            background: rgba(0, 0, 0, 0.15);
        }

        .indicator__block.is-active {
            background: #ff7a45;
            /* 温暖的橙色 */
        }
    }

    /* 副标题板块 */
    &__subtitle {
        width: 95%;
        margin: auto;
        padding: 16px 18px;
        /* 增加内边距以配合放大字号 */
        display: flex;
        align-items: center;
        background: #fff;
        margin-top: 12px;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);

        .subtitle__left {
            font-size: 30px;
            color: #222;
            font-weight: 800;
        }
    }

    /* 瀑布流区域，两列布局 */
    &__waterfall {
        width: 100%;
        padding: 12px 10px;
        display: flex;
        gap: 8px;
        box-sizing: border-box;

        .waterfall__column {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .card {
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

            .card__img {
                width: 100%;
                height: auto;
                display: block;
            }

            .card__info {
                padding: 12px;
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            // 卡片标题 
            .card__title {
                font-size: 26px;
                color: #222;
                font-weight: 600;
            }

            // 卡片时间
            .card__time {
                font-size: 22px;
                color: #888;
            }
        }
    }
}